<template>
    <div>
        <!--右边-->
        <div class="h-27" >
            <div class="p-1">
                <div class="p-2">编辑{{title}}摘牌申请</div>
                <div class="p-3">
                    <!--路由-->
                    <div class="b-8">
                        <div class="b-9 p-4">当前位置： <a href="javascript:;">首页</a> > <a href="javascript:;">编辑摘牌申请</a></div>
                    </div>
                </div>
                <div class="q-1" v-if="!onShow">
                    <ul class="q-2">
                        <li  :class="{'active':status==1}">
                            <div class="q-3"><div class="q-4"></div><div class="q-5">填写资料</div></div>
                        </li>
                        <li :class="{'active':status==2}">
                            <div class="q-3"><div class="q-4"></div><div class="q-5">审核</div></div>
                        </li>
                        <li :class="{'active':status==3}">
                            <div class="q-3"><div class="q-4"></div><div class="q-5">协商</div></div>
                        </li>
                        <li :class="{'active':status==4}">
                            <div class="q-3"><div class="q-4"></div><div class="q-5">付款中</div></div>
                        </li>
                        <li :class="{'active':status==5}">
                            <div class="q-3"><div class="q-4"></div><div class="q-5">交货中</div></div>
                        </li>
                        <li :class="{'active':status==6}">
                            <div class="q-3"><div class="q-4"></div><div class="q-5">摘牌成功</div></div>
                        </li>
                    </ul>
                </div>
                <div class="q-6" v-if="!onShow">
                    <div class="q-7">
                        <div class="c-23">
                            <div class="c-24">填写资料</div>
                        </div>

<div class="editApplyForm">
<el-form ref="form" :model="form" label-width="140px" :rules="formrules">
    <el-form-item label="选择身份" class="bjcolor" prop="identityType">
    <el-radio-group v-model="form.identityType" >
      <el-radio  :label="1" >企业</el-radio>
      <el-radio  :label="2">个人</el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="选择权利" v-model="form.delistPower" prop="delistPower">

     <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                               <div style="margin: 15px 0;"></div>
                             <el-checkbox-group v-model="form.delistPower" @change="handleCheckedCitiesChange">
                              <el-checkbox v-for="v in powerType" :label="v.dictCode" :key="v.dictCode">{{v.dictLabel}}</el-checkbox>
                              </el-checkbox-group>

    <!-- <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
  <div style="margin: 15px 0;"></div>
  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
    <el-checkbox v-for="v in rules" :label="v.type" :key="v.type">{{v.name}}</el-checkbox>
  </el-checkbox-group> -->

    <!-- <el-input v-model="form.name"></el-input> -->
  </el-form-item>
<el-form-item label="摘牌申请" class="bjcolor" v-model="form.applyTable" prop="applyTable">
            <div class="p-18">点击下载摘牌申请表模板</div>
   <el-upload
  class="avatar-uploader"
  :action="uploadaction"
  :show-file-list="false"
    :on-success="uploadapplyTable"
    :limit="1"
  >
  <img v-if="form.applyTable" :src="form.applyTable" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
 </el-form-item>

<el-form-item label="摘牌委托书" v-model="form.entrustImage" prop="entrustImage">
            <div class="p-18">点击下载摘牌委托书模板</div>
   <el-upload
  class="avatar-uploader"
  :action="uploadaction"
  :show-file-list="false"
   :on-success="uploadentrustImage"
  >
  <img v-if="form.entrustImage" :src="form.entrustImage" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
 </el-form-item>


 <el-form-item label="订单（报价）" class="bjcolor" v-model="form.priceTable" prop="priceTable">
            <div class="p-18">点击下载订单（报价）模板</div>
   <el-upload
  class="avatar-uploader"
  :action="uploadaction"
  :show-file-list="false"
  :on-success="uploadpriceTable"
  >
  <img v-if="form.priceTable" :src="form.priceTable" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
 </el-form-item>



<el-form-item label="资质证明文件" v-model="form.seniorityProve" >
            <div class="p-18">点击下载企业授权委托书模板</div>


       


<!-- 
            <div class="upload-cont">
                <div><el-upload
  class="avatar-uploader-list"
  :action="uploadaction"
  :show-file-list="false"
  :on-success="uploadone"
  >
  <img v-if="imageone" :src="imageone" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload></div>
                <div>法人身份证正面复印件</div>
            </div> -->
   <el-upload
              :action="uploadUrls"
              :multiple = true
              list-type="picture-card"
              :limit='4'
              :with-credentials='true'
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-error="handleError"
              :on-success="handlebasicImage"
              >
              <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogImg">
        <img width="100%" :src="image" alt="">
    </el-dialog>
   <!-- <div class="upload-cont">
                <div><el-upload
  class="avatar-uploader-list"
  :action="uploadaction"
  :show-file-list="false"
  :on-success="uploadtwo"
  >
  <img v-if="imagetwo" :src="imagetwo" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload></div>
                <div>法人身份证正面复印件</div>
            </div> -->
             <!-- <div class="upload-cont">
                <div><el-upload
  class="avatar-uploader-list"
  :action="uploadaction"
  :show-file-list="false"
  :on-success="uploadthree"
  >
  <img v-if="imagethree" :src="imagethree" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload></div>
                <div>法人身份证正面复印件</div>
            </div> -->
             <!-- <div class="upload-cont">
                <div><el-upload
  class="avatar-uploader-list"
  :action="uploadaction"
  :show-file-list="false"
  :on-success="uploadfore"
  >
  <img v-if="imagefore" :src="imagefore" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload></div>
                <div>法人身份证正面复印件</div>
            </div> -->
  <div class="cdesc">
      <el-input type="textarea" v-model="form.companyText" placeholder="请填写企业简介" ></el-input>
  </div>
  <div class="q-15">
											企业法人必备的资格证明材料（如复印件需加盖公章）<br />
											(1)、法人代表身份证等复印件； <br />
											(2)、企业简介；<br />
											(3)、如需授权办理的需提交受托人身份证明复印件。
										</div>
 </el-form-item>
<el-form-item label="其它证书" class="bjcolor" v-model="form.delistImage" prop="delistImage">
          
   <el-upload
  class="avatar-uploader"
  :action="uploadaction"
  :show-file-list="false"
  :on-success="uploaddelistImage"
  >
  <img v-if="form.delistImage" :src="form.delistImage" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
 </el-form-item>

  <el-form-item label="" v-model="form.delistText">
    <div class="cdesc">
      <el-input type="textarea" v-model="form.delistText" placeholder="请回答挂牌方问题" ></el-input>
  </div>
  </el-form-item>

 
  
  
  
  <el-form-item class="bjcolor p20">
    <el-button type="danger" @click="onSubmit('form')">提交</el-button>
    <!-- <el-button>取消</el-button> -->
  </el-form-item>
</el-form>
</div>
                      
                       
                    
                    
                       
                    
                    </div>
                    
                </div>
                <!--审核中-->
                <div class="q-17" v-if="onShow">
                    <img class="q-18" src="@/assets/image/shz.png"/>
                    <div class="q-19">已提交审核，请耐心等待</div>
                </div>

            </div>
        </div>
        <div style="clear: both;"></div>
    </div>
</template>

<script>
 import {findDeli,editDeli,addDeli} from '@/api/myDelist';
 const baseUrl = process.env.VUE_APP_BASE_API;
import {setToken} from '@/utils/auth'
var _self;

    export default {
        name: "deListApply",
        data(){
            return{
              onShow:false,   //审核提交提示，默认隐藏
              productId:undefined,
             // trading_type:0, //挂牌类型
             // trading_power:"1,2,3,4",
              projectTypeOptions:[],
              worksTypeOptions:[],
              title:"",
              form: {
                  identityType:0,//类型
                  delistPower:[],//权利
                  applyTable:'',//申请表
                  entrustImage:'',//委托书
                  priceTable:'',//报价表
                  seniorityProve:'',//资质证明
                  companyText:'',//企业简介
                  delistImage:'',//挂牌要求的说明
                  delistText:'',//文字说明
                  delistId:0,
                  productId:0
         
        },
         formrules:{
           identityType:[{required: true, message: '请选择类型', trigger: 'blur'}],
         //  delistPower:[{required:true,message:"请选择权利",trigger:'blur'}],
           applyTable:[{required:true,message:"请选择权利",trigger:'blur'}],
           entrustImage:[{required:true,message:"请选择权利",trigger:'blur'}],
           priceTable:[{required:true,message:"请选择权利",trigger:'blur'}],
           seniorityProve:[{required:true,message:"请选择权利",trigger:'blur'}],
           delistImage:[{required:true,message:"请选择权利",trigger:'blur'}],
        },
        uploadaction:'',
        editForm:[],
         checkAll: false,
       // checkedCities: [],
       powerType:[],
        isIndeterminate: true,
        status:1,//摘牌信息的状态
        imageUrl:"",
        imageone:"",
        imagetwo:"",
        imagethree:"",
        imagefore:"",
        uploadUrls: baseUrl+'api/file/imageUpload',//上传图片路径
        seniorityProves:[],
         image:undefined, 
          dialogImg:false,
            }
        },
        created(){
            _self = this;
          this.productId=this.$route.query.product;
          _self.form.productId = this.$route.query.product;
          //console.log(this.productId);
          _self.uploadaction =process.env.VUE_APP_BASE_API+"api/file/imageUpload";
          
          //_self.init();

          _self.getDicts("power_type").then(res=>{  //权利类型
           console.log(res);
            _self.powerType=res.data;
          })
       
        },
        methods:{
          handleRemove(file, fileList) {//移除
               // console.log(file, fileList);
            },
            handlePictureCardPreview(file) {//预览
               // console.log(file)
                this.image = file.url;
                this.dialogImg = true;
            },
            handleError(err){//上传失败
               // console.log(err)
            },
           
            handlebasicImage(res)
            {
               let files = res.url;
                _self.seniorityProves.push(files);
            },
            init:function(){
                //addDeli()
               // let data={"delistId":_self.productId}
                //findDeli(data).then(res=>{
                //  console.log(res);
                //  if(res.code==200){
                 //     _self.status = res.data.status
                 //       _self.form = res.data;  
                 //     _self.form.delistPower = res.data.delistPower.split(',').map(Number);
                      
                  //    Object.assign(_self.form,_self.form);
                 // }
                //})
            },
            submitDelist(){
                this.onShow=true;
            },
          
        handleCheckAllChange(val) {
            console.log("这里执行了没有");
           

      _self.powerType.forEach(item=>{  //当全选被选中的时候，循环遍历源数据，把数据的每一项加入到默认选中的数组去
            _self.form.delistPower.push(item.dictCode)
            })
           
            
            _self.form.delistPower = val ? _self.form.delistPower : [];
           _self.isIndeterminate = false;

        
      },
      handleCheckedCitiesChange(value) {
        
        let checkedCount = value.length;
        _self.checkAll = checkedCount === _self.powerType.length;
        _self.isIndeterminate = checkedCount > 0 && checkedCount < _self.powerType.length;
      
      },
      uploadapplyTable:function(res){
         if(res.code==200){
             _self.form.applyTable = res.url;
         }
      },
      uploadentrustImage:function(res){
          if(res.code==200){
             _self.form.entrustImage = res.url;
         }
      },
      uploadpriceTable:function(res){
          if(res.code==200){
             _self.form.priceTable = res.url;
         }
      },
      uploadone:function(res){
          if(res.code==200){
             _self.imageone = res.url;
         }
      },
       uploadtwo:function(res){
          if(res.code==200){
             _self.imagetwo = res.url;
         }
      },
       uploadthree:function(res){
          if(res.code==200){
             _self.imagethree = res.url;
         }
      },
       uploadfore:function(res){
          if(res.code==200){
             _self.imagefore = res.url;
         }
      },
      uploaddelistImage:function(res){
        
         if(res.code==200){
             _self.form.delistImage = res.url;
         }
      
       },
       onSubmit(data) {
        console.log(data);
        this.$refs[data].validate((valid) => {
          if (valid) {
            //验证成功后
            _self.edit();
           
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      edit:function(){
          
          let dataimg = _self.seniorityProves.join(",");
          _self.form.seniorityProve = dataimg;
          _self.form.delistPower= _self.form.delistPower.join(',');

          if(_self.form.delistPower.length<=0){_self.$message.error("请选择权利");return false};
          let data = _self.form;
          console.log(data);
          addDeli(data).then((res)=>{
              console.log(res);
              if(res.code==200){
                  _self.$message({
                      message:res.message,
                      type:"success"
                  })
                  _self.$router.push('myDelist')
              }
          })
      }
         
        }
    }
</script>

<style >
    #p1-11{height: auto;padding-bottom: 20px;}
    .p1-13{display: inline-block;width: 780px;vertical-align: top;line-height: initial;margin-top: 18px;}
    
    .editApplyForm{padding: 0 15px;}
    .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 0px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .upload-cont{
      width: 25%;
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      float: left;
  }
  .bjcolor{
      background: #ffffff;
  }
  .avatar-uploader-list .el-upload{
    border: 1px dashed #000;
    border-radius: 0px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 160px;
    height: 210px;
    float: left;
    margin-right: 10px;
}
 .upload-cont{
      width: 25%;
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      float: left;
  }
  .cdesc{
      margin-right: 10px;
      
  }
  .cdesc .el-textarea__inner{
      border-radius: 0;
      height: 100px;
      margin-top: 10px;
  }
  .p20{
      padding: 20px;
      text-align: center
  }
  @import "../../layui/css/layui.css";
    @import "../../css/index.css";
    @import "../../css/user_listing.css";
    @import "../../css/user_addlistingl.css";
    @import "../../css/user_adddeslisting.css";
    @import "../../css/idangerous.swiper.css";
</style>
